<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>新闻列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="css/companyNews.css">
    <link rel="stylesheet" href="../../css/pulice.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper-3.4.2.min.css">
    <style>
        #news img{width: 100%;height: 10.8rem;}
        #news{height: 10.8rem;}
        .banner{position:relative}
        .bannerBottom{font-size: 0.7rem;padding: 0 0.625rem;align-items: center;position:absolute;bottom:0;left:0;right:0;height:1.95rem;display:flex;background:rgba(0,0,0,.5);z-index:1;color:#fff;}
        .banner-tay{height:.875rem;border-radius:1rem;background:#2a8fff;width:1.8rem;font-size:.55rem;margin-right:.5rem;text-align:center;}
        .banner-tit{flex: 1}
        .swiper-pagination{position:static;display:block;flex:0;flex-basis:2.5rem;}
        .newH1{background: #fff;height: 2.45rem;line-height: 2.45rem;border-bottom:0.25rem solid #f5f5f5;font-size:0.7rem;padding:0 0.6rem}
        .newH1:before{content: '';display: inline-block;background: #2a8fff;width: 4px;height: 0.75rem;vertical-align: text-bottom;}
        .naws-list{padding:0 0.375rem;background: #fff;}
        .naws-list > li{border-bottom: 1px solid #ccc;padding:.625rem 0.2rem;}
        .naws-list > li a{display:flex;align-items:center;color: #333}
        .naws-list > :last-child{border-bottom: 0}
        .news-left{flex: 2;}
        .news-left :first-child{font-size: 0.65rem;margin-bottom: .5rem;}
        .news-left :last-child{font-size: 0.55rem;color: #999;}
        .news-right{flex:1;width:5%;}
        .loading{text-align: center;padding: .5rem 0 .35rem;}
        .loading img{width:1rem;height:1rem;display:inline-block;vertical-align:middle;position:relative;top:-3px;}
    </style>
    <script src="../../js/api.js"></script>
    <script src="../../js/aui-slide.js"></script>
    <script src="../../js/aui-tab.js"></script>
    <script src="../../js/libs/zepto.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/libs/swiper.min.js"></script>
    <script>
        const SURL = "http://192.144.135.180/"; // 接口
        const imgUrl = "http://zzhtwl.oss-cn-qingdao.aliyuncs.com/"; // 图片地址

        var indexOne = 0,indexOne2 = 1, indexMaxPage, ajaxStat = 'true';

        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    newList: []
                }
            });

            $('.hm-bar').load('../../data/headerOther.html',function (data) {
                $(this).find('.head-main').text('公司新闻');
                $(this).find('.hm-bar-box').css('position','static');
                $(this).find('.head-left').on('tap',function () {
                    window.history.back();
                })
            });

            $(document).scroll(function () {
                var sm = $(window).scrollTop() + $(window).height();
                var dsm = $(document).height();
                if(sm >= dsm){
                    if (indexOne <= indexMaxPage - 1 || !indexMaxPage) {
                        if (ajaxStat == 'true') {
                            ajaxStat = 'false';
                            $(window).one('touchend', function () {
                                indexOne += 1;
                                $.ajax({
                                    url: SURL + 'app/article/companyNew',
                                    data: {
                                        page: indexOne,
                                        pageSize: 10
                                    },
                                    success: function (data) {
                                        $.each(data.data.maps, function (i) {
                                            app.newList.push(data.data.maps[i]);
                                        });
                                        if (indexOne2 >= indexMaxPage) {
                                            $('.loading').find('span').text('没有更多新闻了')
                                        }else {
                                            $('.loading').find('span').text('上拉加载更多')
                                        }
                                        indexOne2 +=1;
                                        ajaxStat = 'true';
                                    }
                                });
                            })
                        }
                    }
                }
            });

            $.ajax({
                url: SURL + 'app/article/companyNew',
                data: {
                    page: indexOne,
                    pageSize: 10
                },
                success: function (data) {
                    $.each(data.data.maps, function (i) {
                        app.newList.push(data.data.maps[i]);
                    });
                    indexMaxPage = data.data.totalPage;
                }
            });

            $(document).on('ajaxStart',function () {
                $('.loading').find('span').text('加载中...');
            })

            /*var news = new Swiper('#news', {
                autoplay: 5000,
                effect : 'fade',
                pagination : '.swiper-pagination',
                paginationType : 'fraction',
            });*/
        });
    </script>
</head>
<body>
    <div id="app">
        <header class="hm-bar"></header>

        <!--<div class="banner">-->
            <!--<div id="news" class="swiper-container">-->
                <!--<div class="swiper-wrapper">-->
                    <!--<div class="swiper-slide">-->
                        <!--<img src="img/company-news.png" alt=""/>-->
                    <!--</div>-->
                    <!--<div class="swiper-slide">-->
                        <!--<img src="img/company-news.png" alt=""/>-->
                    <!--</div>-->
                    <!--<div class="swiper-slide">-->
                        <!--<img src="img/company-news.png" alt=""/>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="bannerBottom">-->
                <!--<div class="banner-tay">热点</div>-->
                <!--<div class="banner-tit">新闻内容</div>-->
                <!--<div class="swiper-pagination"></div>-->
            <!--</div>-->
        <!--</div>-->

        <div class="newH1">
            新闻列表
        </div>

        <ul class="naws-list">
            <li v-for="list in newList">
                <a :href="'newsDetails.html?articleId='+list.articleId">
                    <ul class="news-left">
                        <li>{{list.articleTitle}}</li>
                        <li>华猫新闻</li>
                    </ul>
                    <!--<img class="news-right" src="img/qm1.png" alt=""/>-->
                </a>
            </li>
        </ul>
        <div class="loading">
            <img src="../../img/footerIcon1.png" alt=""/>
            <span>上拉加载更多</span>
        </div>
    </div>
</body>
</html>